<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function () {
            $("button:contains('追加内容1')").click(function () {
                $("#root").append("<b>Hello</b>");
            });

            $("button:contains('追加内容2')").click(function () {
              //  $("#root").append("<b>Hello</b>");
                $("<p>一段文字</p>").appendTo("#root");
            });
            $("button:contains('放前面')").click(function () {
                $("div").before("<b>Hello</b>");
            });
            $("button:contains('显示')").click(function () {
               // alert($("button").last().html());
                alert($("button").eq(2).next().html());

            }); $("button:contains('效果消失')").click(function () {
               // $("#root").hide(1000);

                $("#root").  fadeOut(1500)

            });$("button:contains('效果出现')").click(function () {
               // $("#root").show(300);
                $("#root").  fadeIn(1500)
            });
        });
    </script>
</head>
<body>
    <div id="root"></div>
    <button>追加内容1</button>
    <button>追加内容2</button>
    <button>放前面</button>
    <button>显示</button>
    <button>效果消失</button>
    <button>效果出现</button>
</body>
</html>